<template>
	<view>
		<view class="row" v-for="(item, index) in dataList" :key="index">
			<view v-if="item.show" class="row-q" @click="hide(index)">
				<view class="row-q-title util-font-medium">Q：{{item.lable}}</view>
				<image v-if="item.show" class="row-q-image" src="../../static/workbench/up_button.png" mode="aspectFit"></image>
				<image v-else class="row-q-image" src="../../static/workbench/down_button.png" mode="aspectFit"></image>
			</view>
			<view v-else class="row-q" @click="show(index)">
				<view class="row-q-title util-font-medium">Q：{{item.lable}}</view>
				<image v-if="item.show" class="row-q-image" src="../../static/workbench/up_button.png" mode="aspectFit"></image>
				<image v-else class="row-q-image" src="../../static/workbench/down_button.png" mode="aspectFit"></image>
			</view>
			<view v-if="item.show" class="row-a util-font-regular">A：{{item.value}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				
			}
		},
		onLoad() {
			this.loadData()
		},
		methods: {
			loadData: function(){
				var that = this
				that.sendRequest({
					url: 'app/appQuestion/page',
					header: that.$urlRequest.getHeader('token'),
					method: 'POST',
					data: {
						page: 1,
						limit: 10
					},
					success: function(res){
						that.dataList = res.data.records
					}
					
				})
			},
			show: function(index) {
				let item = this.dataList[index]
				item.show = true
				this.dataList.splice(index, 1, item)
			},
			hide: function(index) {
				let item = this.dataList[index]
				item.show = false
				this.dataList.splice(index, 1, item)
			}
			
		}
	}
</script>

<style>
	.row {
		margin: 30rpx 0;
	}

	.row-q {
		background-color: #f5f5f5;
		border-top: 2rpx solid #e5e5e5;
		border-bottom: 2rpx solid #e5e5e5;
		padding: 15rpx 30rpx;
	}

	.row-q-title {
		color: #333333;
		width: 645rpx;
		font-size: 32rpx;
		padding-right: 15rpx;
		display: inline-block;
		vertical-align: middle;
	}

	.row-q-image {
		vertical-align: middle;
		width: 30rpx;
		height: 30rpx;
	}

	.row-a {
		padding: 30rpx 30rpx 0;
		font-size: 28rpx;
		color: #999999;
	}
</style>
